.wrapper {
  padding: 16px;
}

.box {
  border: 1px solid rgba($color: #000000, $alpha: 0.3);
  border-radius: 8px;
  margin: 16px 0;
}

.annotation {
  font-size: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
  .code {
    background-color: yellow;
    font-weight: 900;
  }
  .desc {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
  }
}

.playground {
  padding: 16px;
}

.div, .p, .section {
  border: 1px solid rgba($color: #000000, $alpha: 0.3);
  border-radius: 4px;
  font-size: 13px;
  padding: 8px 16px;
  margin: 5px 0;
  background-color: white;
}

//div 和 p
.container {
  padding: 8px 16px;
  border: 1px solid rgba($color: #000000, $alpha: 0.3);
  border-radius: 4px;
  font-size: 13px;
}

.textbox-1 .div, .textbox-1 .p {
  background-color: #8fdfae;
}
.textbox-2 .p.text {
  background-color: #8fdfae;
}
.textbox-3 .div .p {
  background-color: #8fdfae;
}
.textbox-4 .div>.p {
  background-color: #8fdfae;
}
.textbox-5 .div+.p {
  background-color: #8fdfae;
}
.textbox-6 .div::first-letter {
  color: red ;
  font-size: 20px;
  background-color: #8fdfae;
}
.textbox-7 .div~.p {
  background-color: #8fdfae;
}
.textbox-8 .p:first-of-type {
  background-color: #8fdfae;
}
.textbox-9 .p:only-of-type {
  background-color: #8fdfae;
}
.textbox-10 .p:nth-of-type(2) {
  background-color: #8fdfae;
}
.textbox-11 .p:empty{
  background-color: #8fdfae;
}
.textbox-12 :not(.p) {
  background-color: #8fdfae;
}